<template>
    <div>
        <el-card shadow="never">
            <el-row>
                <i class="el-icon-search"></i>
                <span>入库查询</span>
            </el-row>
            <el-row style="margin-top: 20px">
                <span>入库单号: </span>
                <span>{{ batchNo }}</span>
            </el-row>
        </el-card>
        <el-card shadow="never" class="table-container">
            <el-table :loading="listLoading" :data="tableList" border>
                <el-table-column label="商品" width="300" align="center">
                    <template slot-scope="scope">
                        <el-row type="flex" justify="center">
                            <el-avatar shape="square" :size="50" :src="scope.row.resourceUrl">
                                <img :src="scope.row.resourceUrl" />
                            </el-avatar>
                            <div class="goods-info">
                                <div class="goods-name" :title="scope.row.name">
                                    {{ scope.row.goodsName }}
                                </div>
                            </div>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="单位" prop="unit" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.unit }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="供货单价" prop="supplyPrice" align="center">
                    <template slot-scope="scope">
                        <span class="goods-price">￥ {{ formatMoney(scope.row.supplyPrice) }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <span slot="footer" class="dialog-footer">
            <el-row style="margin-top:20px">
                <el-button style="float:right;margin-right:12px" @click="onHide">关闭</el-button>
            </el-row>
        </span>
    </div>
</template>

<script>
import { getStorageCheckDetail } from '@/api/storage';
import { formatMoney } from '@/utils/goods';

export default {
    props: {
        batchId: {
            type: [String, Object],
            default: null
        }
    },
    data() {
        return {
            listLoading: false,
            tableList: []
        };
    },
    created() {
        this.getTableList();
    },
    methods: {
        getTableList() {
            this.listLoading = true;
            getStorageCheckDetail(this.batchId).then(res => {
                this.listLoading = false;
                if (res.data.success) {
                    this.tableList = res.data.data;
                } else {
                    this.tableList = [];
                }
            });
        },
        onHide() {
            this.$emit('hide', true);
        },
        formatMoney(num) {
            return formatMoney(num);
        }
    }
};
</script>
<style lang="scss" scoped>
.goods-info {
    width: 150px;
}
.goods-name {
    width: 150px;
    height: 30px;
    text-align: start;
    padding-left: 10px;
    overflow: hidden;
    line-height: 15px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.goods-price {
    color: red;
    float: left;
    margin-left: 10px;
}
.goods-unit {
    float: right;
    text-align: left;
    width: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>
